<template>
  <el-table
    :data="props.tableData"
    style="width: 100%"
    border
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column type="index" align="center" width="55" label="序号" />
    <el-table-column
      align="center"
      v-for="item in props.columns"
      :key="item.props"
      :label="item.label"
      :prop="item.prop"
      width="200"
    />
    <el-table-column label="角色" align="center">
      <template #default="scope">
        <el-tag v-if="scope.row.role === 'admin'" type="primary">{{ scope.row.role }}</el-tag>
        <el-tag v-else type="warning">{{ scope.row.role }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="{ row, $index }">
        <el-button type="primary" @click="handleEdit(row, $index)">编辑</el-button>
        <el-button type="danger" @click="handleDelete(row, $index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <Component :is="tableData"></Component>
  <!-- {{ (props.tableData, props.columns) }} -->
</template>
<script setup lang="ts">
import { ref, PropType, defineEmits } from "vue";
const props = defineProps({
  // 表格数据
  tableData: {
    type: Array as PropType<any[]>,
    required: true,
  },
  // 表格列
  columns: {
    type: Array as PropType<any[]>,
    required: true,
  },
});
const emit = defineEmits(["edit", "delete", "selectionChange"]);
// 编辑
const handleEdit = (row: any, $index: number) => {
  emit("edit", row, $index);
};
// 删除
const handleDelete = (row: any, $index: number) => {
  emit("delete", row, $index);
};
// 全选
const handleSelectionChange = (val: any) => {
  emit("selectionChange", val);
};
</script>
